<template>
  <Form class="operate-form" ref="form" :model="formItem" :label-width="120" lable-position="right"
        :rules="ruleValidate">
    <FormItem label="编号：" prop="code">
      <Input placeholder="请输入" v-model="formItem.taskCode" class="width-num" :readonly="isEdit"></Input>
    </FormItem>
    <FormItem label="优先级：" prop="priority">
      <RadioGroup v-model="formItem.priority">
        <Radio label="1">低</Radio>
        <Radio label="2" class="margin-left-20">一般</Radio>
        <Radio label="3" class="margin-left-20">紧急</Radio>
        <Radio label="4" class="margin-left-20">非常紧急</Radio>
      </RadioGroup>
    </FormItem>
    <FormItem label="任务描述：" prop="taskDesc">
      <Input type="textarea" v-model="formItem.taskDesc" :rows="5" placeholder="请输入" class="width-num"></Input>
    </FormItem>
    <FormItem label="任务资料：">
      <Row>
        <i-col span="10">
          <Upload
            type="drag"
            class="width-num"
            action="">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p style="color: #bebebe;">请在此处上传项目资料及相关附件</p>
            </div>
          </Upload>
        </i-col>
        <i-col span="12">
          <div style="width: 200px;height: 125px;" v-show="isEdit">
            <img src="../../../assets/images/task.jpg" style="width: 100%;height: 100%;"/>
          </div>
        </i-col>
      </Row>
    </FormItem>
    <FormItem label="任务状态：" prop="taskStatus">
      <Select v-model="formItem.taskStatus" class="width-num">
        <Option value="assigned">派发中</Option>
        <Option value="doing">执行中</Option>
        <Option value="finish">已完结</Option>
        <Option value="abnormal">异常</Option>
      </Select>
    </FormItem>
    <FormItem label="物资分类：" prop="materialType">
      <Select v-model="formItem.materialType" class="width-num">
        <Option value="物资分类1">物资分类1</Option>
        <Option value="物资分类2">物资分类2</Option>
        <Option value="物资分类3">物资分类3</Option>
      </Select>
    </FormItem>
    <FormItem label="物资编目：" prop="materialCataloging">
      <Select v-model="formItem.materialCataloging" class="width-num">
        <Option value="物资编目1">物资编目1</Option>
        <Option value="物资编目2">物资编目2</Option>
        <Option value="物资编目3">物资编目3</Option>
      </Select>
    </FormItem>
    <FormItem label="计划完成时间：" prop="estimatedStartTime">
      <DatePicker placeholder="请选择" v-model="formItem.estimatedStartTime" class="width-num"></DatePicker>
    </FormItem>
    <FormItem label="联系人：" prop="contactName">
      <Input placeholder="请输入" v-model="formItem.contactName" class="width-num"></Input>
    </FormItem>
    <FormItem label="联系电话：" prop="contactPhone">
      <Input placeholder="请输入" v-model="formItem.contactPhone" class="width-num"></Input>
    </FormItem>
    <FormItem label="受理人：" prop="acceptorName">
      <Input placeholder="请输入" v-model="formItem.acceptorName" class="width-num"></Input>
    </FormItem>
    <FormItem label="受理电话：" prop="acceptorPhone">
      <Input placeholder="请输入" v-model="formItem.acceptorPhone" class="width-num"></Input>
    </FormItem>
    <Row>
      <div class="flex title-desc">
        <div>计划开始时间</div>
        <div>计划完成时间</div>
        <div>实际开始时间</div>
        <div>实际完成时间</div>
        <div>当前进度</div>
      </div>
      <FormItem label="工作流：">
        <Steps :current="Number(formItem.currFlow)" class="engine-step" size="small" direction="vertical">
          <Step title="采购任务创建">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow1EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow1EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow1RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow1RealEndTime" @on-change="onFlowTimeChanged('flow1RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow1Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="采购品类提报">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow2EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow2EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow2RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow2RealEndTime" @on-change="onFlowTimeChanged('flow2RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow2Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="发布招标">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow3EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow3EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow3RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow3RealEndTime" @on-change="onFlowTimeChanged('flow3RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow3Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="服务商竞价">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow4EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow4EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow4RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow4RealEndTime" @on-change="onFlowTimeChanged('flow4RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow4Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="服务商比价">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow5EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow5EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow5RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow5RealEndTime" @on-change="onFlowTimeChanged('flow5RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow5Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="选择中标服务商">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow6EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow6EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow6RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow6RealEndTime" @on-change="onFlowTimeChanged('flow6RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow6Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="物资订购">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow7EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow7EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow7RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow7RealEndTime" @on-change="onFlowTimeChanged('flow7RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow7Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="进货验收">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow8EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow8EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow8RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow8RealEndTime" @on-change="onFlowTimeChanged('flow8RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow8Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="确认完结">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow9EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow9EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow9RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow9RealEndTime" @on-change="onFlowTimeChanged('flow9RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow9Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
          <Step title="任务结算">
            <template slot="content">
              <div class="flex">
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow10EstimatedStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow10EstimatedEndTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow10RealStartTime" class="width-num-1"></DatePicker>
                <DatePicker placeholder="请选择" transfer v-model="formItem.flow10RealEndTime" @on-change="onFlowTimeChanged('flow10RealEndTime')" class="width-num-1"></DatePicker>
                <Select v-model="formItem.flow10Progress" transfer class="width-num-1">
                  <Option value="0%">0%</Option>
                  <Option value="25%">25%</Option>
                  <Option value="50%">50%</Option>
                  <Option value="75%">75%</Option>
                  <Option value="100%">100%</Option>
                </Select>
              </div>
            </template>
          </Step>
        </Steps>
      </FormItem>
    </Row>
    <!--<FormItem label="受理状态：">-->
    <!--<Input size="small" placeholder="请输入" v-model="formItem.state" class="width-num"></Input>-->
    <!--</FormItem>-->
    <FormItem style="margin-top: 40px">
      <Button type="primary" class="width-num" @click="submitTask">提交</Button>
    </FormItem>
  </Form>
</template>

<script>
import api from '@/api/task'

export default {
  name: "MaterialProcurementOperate",
  data() {
    return {
      formItem: {
        taskCode: '',
        taskType: '',
        priority: '',
        taskStatus: '',
        taskDesc: '',
        estimatedStartTime: '',
        contactName: '',
        contactPhone: '',
        acceptorName: '',
        acceptorPhone: '',
        materialType: '',
        materialCataloging: '',
        imgs: '',
        currFlow: 0,
        flow1RealEndTime: '',
        flow2RealEndTime: '',
        flow3RealEndTime: '',
        flow4RealEndTime: '',
        flow5RealEndTime: '',
        flow6RealEndTime: '',
        flow7RealEndTime: '',
        flow8RealEndTime: '',
        flow9RealEndTime: '',
        flow10RealEndTime: ''
      },
      ruleValidate: {
        taskCode: [
          {required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^[0-9a-zA-Z]*$/g, message: '只能输入字母或数字'},
          {
            type: 'string',
            max: 20,
            message: '长度不能超过20个字符',
            trigger: 'blur'
          }
        ],
        taskStatus: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        contactName: [{required: true, message: '请填写', trigger: 'blur'}],
        contactPhone: [{required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^1[3456789][0-9]{9}$/, message: '请输入合法的手机号'}],
        acceptorName: [{required: true, message: '请填写', trigger: 'blur'}],
        acceptorPhone: [{required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^1[3456789][0-9]{9}$/, message: '请输入合法的手机号'}],
        estimatedStartTime: [{required: true, message: '请选择', trigger: 'change', type: 'date'}]
      },
      breadcrumbObj: {
        title: '',
        subTitle: ''
      }
    }
  },
  created() {
    if (this.$route.params !== undefined && this.$route.params.data !== undefined) {
      this.formItem = this.$route.params.data;
    }
    if(this.$route.query !== undefined && this.$route.query.id !== undefined) {
      this.isEdit = true;
      // api.getById(this.$route.query.id).then(({data}) => {
      //   if (data.returnCode === 200) {
      //     this.formItem = data.returnData;
      //     let list = this.formItem.taskType.split('-');
      //     this.breadcrumbObj.title = this.$dataInfo.getTitle(list[0]);
      //     this.breadcrumbObj.subTitle = this.$dataInfo.getSubTitle(this.formItem.taskType);
      //   } else {
      //     this.$Message.error(data.returnMsg)
      //   }
      // })
    } else {
      this.isEdit = false;
      this.formItem.taskType = this.$route.query.taskType;
      let list = this.formItem.taskType.split('-');
      this.breadcrumbObj.title = this.$dataInfo.getTitle(list[0]);
      this.breadcrumbObj.subTitle = this.$dataInfo.getSubTitle(this.formItem.taskType);
    }
  },
  methods: {
    onFlowTimeChanged(type) {
      let currFlowIndex = 0;
      for (let i = 0; i < 9; i++) {
        if (this.formItem['flow' + i + 'RealEndTime'] !== null && this.formItem['flow' + i + 'RealEndTime'] !== '') {
          currFlowIndex = i;
        } else {
          break;
        }
      }
      this.formItem.currFlow = currFlowIndex;
    },
    //提交任务
    submitTask() {
      if (this.isEdit) {
        api.update(this.formItem).then(({data}) => {
          if (data.returnCode === 200) {
            this.$Message.success('更新成功!');
            this.exitBtn();
          } else {
            this.$Message.error(data.returnMsg);
          }
        })
      } else {
        api.insert(this.formItem).then(({data}) => {
          if (data.returnCode === 200) {
            this.$Message.success('添加成功!');
            this.exitBtn();
          } else {
            this.$Message.error(data.returnMsg);
          }
        })
      }
    },
    exitBtn() {
      this.$router.push({
        path: '/task',
        query: {
          type: this.formItem.taskType
        }
      })
    },
    onNextStep() {
      if (Number(this.formItem.currFlow) === 4) {
        this.formItem.currFlow = 0;
      } else {
        this.formItem.currFlow = Number(this.formItem.currFlow) + 1;
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/common";

/deep/ .operate-card .ivu-card-head p {
  font-size: 18px;
}

/deep/ .operate-step .ivu-steps-item {
  height: 33px;
  line-height: 33px;
}

/deep/ .ivu-steps.ivu-steps-small .ivu-steps-head-inner {
  margin-top: 6px;
}

.task-operate {
  margin-top: 125px;
  margin-bottom: 30px;
  width: 100%;

  .operate-card {
    width: 1200px;
    margin: 0 auto;
  }

  .operate-form {
    margin: 30px 80px 30px;
  }

  .operate-bread {
    margin: 5px 42px;
  }
}

.width-num {
  width: 350px;
}
.title-desc {
  font-size: 12px;
  color: #888;
  font-weight: bold;
  margin-left: 248px;
  div {
    flex: none;
    text-align: center;
    width: 120px;
  }
}
/deep/ .engine-step {
  margin-top: 10px;
}
/deep/ .engine-step .ivu-steps-content{
  position: absolute;
  top: 0;
  left: 100px;
  width: 600px;
}
.width-num-1 {
  width: 200px;
}
</style>
